.detail {
    display: flex;
    // flex-direction: column;
    // align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 50px;

    .articleBody {
        width: 750px;


        .content {
            padding: 60px 0;
        }
    }

    .catalogue_hd {

        width: 350px;
        height: 450px;
        padding-left: 60px;
        padding-top: 60px;
        position: sticky;
        top: 60px;

        &::after {
            content: '目 录';
            position: absolute;
            top: 72px;
            left: 62px;
            color: #1185f1;
            font-weight: 600;
            font-size: 18px;

        }

        .catalogue {
            width: 100%;
            height: 100%;
            // background-color: pink;
            overflow-y: scroll;

            margin-top: 50px;
            position: relative;

            /*// 一、必须增加，设置滚动条样式*/
            &::-webkit-scrollbar {
                width: 5px;
                height: 10px;
            }

            /*// 二、置底的滑动槽，可以选择不写，默认*/
            &::-webkit-scrollbar-track {
                border-radius: 10px;
                background-color: #ccc;
            }

            /*//三、滚动条滑块和第一条必须书写，不写的话，无法实现*/
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: rgb(48, 48, 48);

            }
        }
    }

    .comment {
        // height: 500px;
        width: 1100px;

        .comment_body {
            // background-color: pink;
            width: 750px;
            // height: 300px;

            .comment_list {
                width: 100%;
                // background-color: green;

                .comment_item {
                    padding: 15px 20px;
                    // height: 150px;
                    display: flex;
                    border: 1px solid #eee;

                    border-top: none;

                    &:nth-of-type(2) {
                        border-top: 1px solid #eee;
                    }

                    &:hover {
                        // background-color: #fafafa;
                    }

                    .user_portrait {
                        width: 35px;
                        height: 35px;

                        img {
                            border-radius: 50%;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .user_body {
                        width: 100%;
                        height: 100%;
                        padding-left: 15px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        >.comment_item {
                            margin-top: 10px;
                            border: none;
                            background-color: #fafafa;
                        }

                        .info {
                            // height: 100%;

                            .userdetail {
                                padding: 10px 0;
                            }

                            .username {
                                color: #409EFF;
                                font-size: 18px;
                                margin-bottom: 10px;
                            }

                        }

                        .operation {
                            position: relative;
                            height: 25px;
                            width: 100%;
                            display: flex;
                            align-items: center;

                            >div {
                                cursor: pointer;
                                width: 18px;
                                height: 18px;
                                font-size: 18px;
                                margin-right: 5px;
                            }

                            .date {
                                color: rgba(59, 169, 132, 0.9);
                            }

                            .say {
                                color: rgba(241, 189, 18, 0.89);
                            }

                            >span {
                                margin-right: 30px;
                            }

                            .reply {
                              font-size: 14px;
                              color: rgba(0, 0, 0, .45);
                              width: auto !important;
                              text-align: right;
                              position: absolute;
                              top: 0;
                              right: 0;
                          }
                        }
                    }

                }
            }
        }
    }
}